<template>
  <div class="home-page">
    <!-- 页面头部 -->
    <img class="hometop" src="https://lesson.iapeap.com/4.png" alt="" />
    <div class="banner" @click="openzp">
      <img class="" src="https://lesson.iapeap.com/66666666666.png" alt="" />
    </div>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 轮播图 -->
      <!-- <section class="slider-section">
        <div
          class="slider-container"
          @touchstart="onTouchStart"
          @touchmove="onTouchMove"
          @touchend="onTouchEnd"
          @mousedown="onMouseDown"
          @mousemove="onMouseMove"
          @mouseup="onMouseEnd"
          @mouseleave="onMouseEnd"
        >
          <div class="slider" :style="sliderStyle">
            <div class="slide slide-1">
              <div class="slide-content">
                <div class="slide-badge">热门推荐</div>
                <h2 class="slide-title">心理健康测评</h2>
                <p class="slide-desc">
                  专业心理测评，了解自我状态，发现潜在问题
                </p>
              </div>
              <div class="slide-decoration">
                <div class="decoration-circle"></div>
                <div class="decoration-wave"></div>
              </div>
            </div>

            <div class="slide slide-2">
              <div class="slide-content">
                <div class="slide-badge">专业服务</div>
                <h2 class="slide-title">专家在线咨询</h2>
                <p class="slide-desc">资深心理咨询师一对一服务，解决心理困扰</p>
              </div>
              <div class="slide-decoration">
                <div class="decoration-circle"></div>
                <div class="decoration-wave"></div>
              </div>
            </div>

            <div class="slide slide-3">
              <div class="slide-content">
                <div class="slide-badge">每日练习</div>
                <h2 class="slide-title">冥想放松训练</h2>
                <p class="slide-desc">
                  每日10分钟，有效缓解压力焦虑，提升幸福感
                </p>
              </div>
              <div class="slide-decoration">
                <div class="decoration-circle"></div>
                <div class="decoration-wave"></div>
              </div>
            </div>
          </div>

          <div class="slider-controls" style="display: none">
            <button class="slider-prev" @click="prevSlide">
              <i class="fas fa-chevron-left"></i>
            </button>
            <button class="slider-next" @click="nextSlide">
              <i class="fas fa-chevron-right"></i>
            </button>
          </div>

          <div class="slider-nav">
            <div
              v-for="index in 3"
              :key="index"
              class="nav-dot"
              :class="{ active: currentSlide === index - 1 }"
              @click="setSlide(index - 1)"
            ></div>
          </div>
        </div>
      </section> -->

      <!-- 功能栏 - 优化为4个选项一排 -->
      <section class="features-section">
        <div class="section-header">
          <div class="section-title">
            <div class="title-icon">
              <i class="fas fa-th-large"></i>
            </div>
            <div class="title-content">
              <h2>快捷功能</h2>
              <p>快速访问常用功能</p>
            </div>
          </div>
        </div>

        <div class="features-grid">
          <div class="feature-card" @click="openyjyy" data-aos="fade-up">
            <div class="feature-card-inner">
              <div class="feature-icon">
                <div class="icon-background"></div>
                <img
                  class="icon-item"
                  src="https://lesson.iapeap.com/%E9%A2%84%E7%BA%A6.png"
                  alt="一键预约"
                />
              </div>
              <div class="feature-content">
                <h3 class="feature-title">一键预约</h3>
                <p class="feature-desc">快速预约</p>
              </div>
            </div>
          </div>

          <div
            class="feature-card"
            @click="openzp"
            data-aos="fade-up"
            data-aos-delay="50"
          >
            <div class="feature-card-inner">
              <div class="feature-icon">
                <div class="icon-background"></div>
                <img
                  class="icon-item"
                  src="https://lesson.iapeap.com/%E6%B5%8B%E8%AF%84.png"
                  alt="自评量表"
                />
              </div>
              <div class="feature-content">
                <h3 class="feature-title">自评量表</h3>
                <p class="feature-desc">专业评估</p>
              </div>
            </div>
          </div>

          <div
            class="feature-card"
            @click="openyyjl"
            data-aos="fade-up"
            data-aos-delay="100"
          >
            <div class="feature-card-inner">
              <div class="feature-icon">
                <div class="icon-background"></div>
                <img
                  class="icon-item"
                  src="https://lesson.iapeap.com/%E5%92%A8%E8%AF%A2%E8%AE%B0%E5%BD%95.png"
                  alt="咨询记录"
                />
              </div>
              <div class="feature-content">
                <h3 class="feature-title">咨询记录</h3>
                <p class="feature-desc">历史记录</p>
              </div>
            </div>
          </div>

          <div
            class="feature-card"
            @click="opendklx"
            data-aos="fade-up"
            data-aos-delay="150"
          >
            <div class="feature-card-inner">
              <div class="feature-icon">
                <div class="icon-background"></div>
                <img
                  class="icon-item"
                  src="https://lesson.iapeap.com/%E7%BB%83%E4%B9%A0.png"
                  alt="打卡练习"
                />
              </div>
              <div class="feature-content">
                <h3 class="feature-title">打卡练习</h3>
                <p class="feature-desc">每日训练</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 推荐课程 -->
      <section class="courses-section">
        <div class="section-header">
          <div class="section-title">
            <div class="title-icon">
              <i class="fas fa-graduation-cap"></i>
            </div>
            <div class="title-content">
              <h2>推荐课程</h2>
              <p>精选心理课程推荐</p>
            </div>
          </div>
        </div>

        <div class="courses-grid">
          <div
            v-for="(course, index) in recommendCourses"
            :key="`course-${course.id}-${index}`"
            class="course-card"
            @click="showCourseDetail(course)"
            :data-aos="'zoom-in'"
            :data-aos-delay="index * 100"
          >
            <div class="course-image">
              <div
                class="course-img-content"
                :style="{ backgroundImage: `url(${course.banner})` }"
              >
                <div class="course-tag">{{ course.tag }}</div>
                <div class="course-duration">
                  <i class="fas fa-clock"></i> {{ course.days }}天
                </div>
              </div>
            </div>
            <div class="course-content">
              <div class="course-header">
                <h3 class="course-title">{{ course.title }}</h3>
                <div class="course-level">
                  {{ getDifficultyText(course.difficultyLevel) }}
                </div>
              </div>
              <p class="course-description">{{ course.info }}</p>
              <div class="course-footer">
                <div class="course-price">
                  <span v-if="course.price === 0" class="price-free">
                    免费
                  </span>
                  <span v-else class="price-amount">¥{{ course.price }}</span>
                </div>

                <button
                  class="enroll-btn"
                  :class="{ disabled: course.isCheckIn === 1 }"
                  @click="enrollCourse(course, $event)"
                  :disabled="course.isCheckIn === 1"
                >
                  {{ course.isCheckIn === 1 ? "已报名" : "报名" }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 底部导航 -->
    <nav class="bottom-nav">
      <div class="nav-item active">
        <div class="nav-icon">
          <i class="fas fa-home"></i>
        </div>
        <span class="nav-label">首页</span>
      </div>
      <div class="nav-item" @click="gomy">
        <div class="nav-icon">
          <i class="fas fa-user"></i>
        </div>
        <span class="nav-label">我的</span>
      </div>
    </nav>
  </div>
</template>

<script>
import { getRecommendCourseList } from "@/api/manager";
import { getZdmemberUserByID } from "@/api/index";

export default {
  name: "HomePage",
  data() {
    return {
      currentSlide: 0,
      slideInterval: null,
      recommendCourses: [], // 存储推荐课程数据

      // 触摸滑动相关数据
      touchStartX: 0,
      touchEndX: 0,
      isDragging: false,
      dragStartX: 0,
      dragOffset: 0,
      isMouseDown: false,
    };
  },
  computed: {
    sliderStyle() {
      // 计算滑动偏移量，包括拖拽偏移
      const baseOffset = this.currentSlide * 103;
      const dragOffset = this.isDragging ? this.dragOffset : 0;
      return {
        transform: `translateX(calc(-${baseOffset}% + ${dragOffset}px))`,
        transition: this.isDragging
          ? "none"
          : "transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)",
      };
    },
  },
  mounted() {
    if (!localStorage.getItem("userId")) {
      alert("请先登录");
      setTimeout(() => {
        this.$router.push("/");
      }, 1000);
      return;
    }
    this.getZdmemberUserByID();
    this.startSlider();
    this.ongetRecommendCourseList();
    // 初始化AOS动画（需要先引入AOS库）
    if (typeof AOS !== "undefined") {
      AOS.init({
        duration: 600,
        easing: "ease-out-cubic",
        once: true,
        offset: 100,
      });
    }
  },
  beforeDestroy() {
    if (this.slideInterval) {
      clearInterval(this.slideInterval);
    }
  },
  methods: {
    getZdmemberUserByID() {
      let data = {
        id: localStorage.getItem("userId"),
      };
      getZdmemberUserByID(data).then((res) => {
        if (res.code === 200) {
          localStorage.setItem("unitId", res.data.unitId);
          localStorage.setItem("manager", res.data.manager);
          localStorage.setItem("userinfo", JSON.stringify(res.data));
        } else {
          this.$toast?.("获取用户信息失败");
        }
      });
    },
    // 获取推荐课程列表
    ongetRecommendCourseList() {
      getRecommendCourseList({
        userId: localStorage.getItem("userId"),
        userType: 2,
      }).then((res) => {
        if (res.code === 200) {
          this.recommendCourses = res.data;
        } else {
          this.$toast?.("获取推荐课程列表失败");
        }
      });
    },

    // 获取难度等级文本
    getDifficultyText(level) {
      const levels = {
        1: "初级",
        2: "中级",
        3: "高级",
      };
      return levels[level] || "初级";
    },

    startSlider() {
      this.slideInterval = setInterval(() => {
        this.nextSlide();
      }, 5000);
    },
    setSlide(index) {
      this.currentSlide = index;
      this.restartSlider();
    },
    nextSlide() {
      this.currentSlide = (this.currentSlide + 1) % 3;
      this.restartSlider();
    },
    prevSlide() {
      this.currentSlide = (this.currentSlide - 1 + 3) % 3;
      this.restartSlider();
    },
    restartSlider() {
      clearInterval(this.slideInterval);
      this.startSlider();
    },

    // 触摸滑动方法
    onTouchStart(e) {
      this.touchStartX = e.touches[0].clientX;
      this.isDragging = true;
      this.dragStartX = e.touches[0].clientX;
      this.dragOffset = 0;
      clearInterval(this.slideInterval);
    },

    onTouchMove(e) {
      if (!this.isDragging) return;
      e.preventDefault();

      const touchX = e.touches[0].clientX;
      this.dragOffset = touchX - this.dragStartX;
    },

    onTouchEnd() {
      if (!this.isDragging) return;
      this.isDragging = false;

      const dragDistance = this.dragOffset;
      const threshold = 50; // 滑动阈值，超过这个值就切换

      if (Math.abs(dragDistance) > threshold) {
        if (dragDistance > 0) {
          // 向右滑动，上一张
          this.prevSlide();
        } else {
          // 向左滑动，下一张
          this.nextSlide();
        }
      } else {
        // 滑动距离不足，回弹到当前幻灯片
        this.restartSlider();
      }

      this.dragOffset = 0;
    },

    // 鼠标拖拽支持（桌面端）
    onMouseDown(e) {
      this.isMouseDown = true;
      this.isDragging = true;
      this.dragStartX = e.clientX;
      this.dragOffset = 0;
      clearInterval(this.slideInterval);
    },

    onMouseMove(e) {
      if (!this.isMouseDown || !this.isDragging) return;

      const mouseX = e.clientX;
      this.dragOffset = mouseX - this.dragStartX;
    },

    onMouseEnd() {
      if (!this.isMouseDown) return;
      this.isMouseDown = false;
      this.isDragging = false;

      const dragDistance = this.dragOffset;
      const threshold = 50;

      if (Math.abs(dragDistance) > threshold) {
        if (dragDistance > 0) {
          this.prevSlide();
        } else {
          this.nextSlide();
        }
      } else {
        this.restartSlider();
      }

      this.dragOffset = 0;
    },

    showSlideDetail(title) {
      this.$notify({
        title: "功能提示",
        message: `查看详情: ${title}`,
        type: "info",
      });
    },
    showCourseDetail(course) {
      this.$notify({
        title: "课程详情",
        message: `查看课程详情: ${course.title}`,
        type: "success",
      });
    },
    // 课程报名
    enrollCourse(course, event) {
      event.stopPropagation();

      if (course.isCheckIn === 1) {
        return;
      }

      console.log("开始报名", JSON.stringify(course));
      this.$router.push({
        path: "/tjkchb",
        query: {
          course: JSON.stringify(course),
        },
      });
    },
    opendklx() {
      this.$router.push({ name: "员工端-打卡练习" });
    },
    openyjyy() {
      this.$router.push({ name: "预约咨询列表" });
    },
    gomy() {
      this.$router.push({ name: "管理者-我的" });
    },
    openyyjl() {
      this.$router.push({ name: "预约记录" });
    },
    openzp() {
      this.$router.push("/userHome2");
    },
  },
};
</script>
<style scoped>
.home-page {
  max-width: 500px;
  margin: 0 auto;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding-bottom: 80px;
  background-image: url("https://lesson.iapeap.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20251017103043_402_138.jpg");
}

.hometop {
  width: 208px;
  height: 88px;
}
.banner {
  display: flex;
  justify-content: center;
}
.banner img {
  width: 375px;
  height: 233px;
  margin-top: -30px;
}

/* 头部样式优化 */
.header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.header-content {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo-icon {
  font-size: 2rem;
  color: #6366f1;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  width: 55px;
  height: 55px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.2);
  transition: transform 0.3s ease;
}

.logo-icon:hover {
  transform: scale(1.05);
}

.logo-text h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-text p {
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 500;
}

/* 主要内容区域 */
.main-content {
  margin: 0 auto;
  padding: 0 20px;
  margin-top: -30px;
}

/* 轮播图样式优化 */
.slider-section {
}

.slider-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  height: 160px;
}

.slider {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 300%;
}

.slide {
  min-width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 30px;
  flex-shrink: 0;
}

.slide-1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.slide-2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.slide-3 {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.slide-content {
  z-index: 2;
  max-width: 60%;
  color: white;
}

.slide-badge {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.7rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.slide-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slide-desc {
  font-size: 0.85rem;
  margin-bottom: 15px;
  opacity: 0.9;
  line-height: 1.4;
}

/* 轮播图控制按钮 */
.slider-controls {
  position: absolute;
  top: 85%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  transform: translateY(-50%);
  z-index: 3;
}

.slider-prev,
.slider-next {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0.7;
}

.slider-prev:hover,
.slider-next:hover {
  background: white;
  transform: scale(1.1);
  opacity: 1;
}

.slider-nav {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-dot.active {
  background: white;
  width: 20px;
  border-radius: 6px;
}

/* 功能区域样式优化 - 4个选项一排 */
.features-section {
  margin-bottom: 30px;
}

.section-header {
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-icon {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  width: 35px;
  height: 35px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.1rem;
  box-shadow: 0 6px 15px rgba(99, 102, 241, 0.3);
}

.title-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.title-content p {
  color: #64748b;
  font-size: 0.9rem;
}

/* 功能网格布局 - 4个选项一排 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.feature-card {
  background: white;
  border-radius: 16px;
  padding: 0.5rem 12px 0.3rem 12px;

  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.8);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.feature-card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.feature-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-background {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  opacity: 0.8;
}

.feature-card:nth-child(2) .icon-background {
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
}

.feature-card:nth-child(3) .icon-background {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
}

.feature-card:nth-child(4) .icon-background {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.icon-item {
  width: 28px;
  height: 28px;
  z-index: 1;
}

.feature-content {
  width: 100%;
}

.feature-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feature-desc {
  color: #64748b;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 课程区域样式优化 - 更紧凑的H5样式 */
.courses-section {
  margin: 30px 0 20px 0;
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.course-card {
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  margin-bottom: 8px;
}

.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

.course-image {
  height: 120px;
  position: relative;
}

.course-img-content {
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 12px;
  background-color: #f8fafc;
}

.course-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #6366f1;
}

.course-duration {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 0.7rem;
}

/* 课程状态标签 */
.course-state {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  color: white;
  z-index: 2;
}

.state-offline {
  background: rgba(107, 114, 128, 0.9);
}

.state-checkin {
  background: rgba(16, 185, 129, 0.9);
}

.course-content {
  padding: 14px;
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.course-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
  flex: 1;
  margin-right: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.4em;
}

.course-level {
  background: #f1f5f9;
  color: #64748b;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.course-description {
  color: #64748b;
  font-size: 0.8rem;
  line-height: 1.3;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.6em;
}

.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-price {
  display: flex;
  align-items: center;
  gap: 4px;
}

.price-free {
  font-size: 1rem;
  font-weight: 700;
  color: #10b981;
}

.price-amount {
  font-size: 1rem;
  font-weight: 700;
  color: #6366f1;
}

.enroll-btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.85rem;
  min-width: 60px;
}

.enroll-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.enroll-btn:disabled,
.enroll-btn.disabled {
  background: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
  transform: none;
}

.enroll-btn:disabled:hover,
.enroll-btn.disabled:hover {
  transform: none;
  box-shadow: none;
}

.enroll-btn.checkin-btn {
  /* background: #10b981; */
}

.enroll-btn.checkin-btn:hover {
  transform: none;
  box-shadow: none;
  cursor: default;
}

/* 底部导航样式优化 */
.bottom-nav {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: white;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #f0f0f0;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #94a3b8;
}

.nav-item.active {
  color: #6366f1;
}

.nav-item:not(.active):hover {
  color: #64748b;
}

.nav-icon {
  font-size: 1.3rem;
  transition: transform 0.3s ease;
}

.nav-item.active .nav-icon {
  transform: translateY(-2px);
}

.nav-label {
  font-size: 0.75rem;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    padding: 0 15px;
  }

  .slider-container {
    height: 160px;
    border-radius: 16px;
  }

  .slide {
    padding: 0 20px;
  }

  .slide-content {
    max-width: 70%;
  }

  .slide-title {
    font-size: 1.2rem;
  }

  .slide-desc {
    font-size: 0.8rem;
  }

  .slider-controls {
    padding: 0 10px;
  }

  .slider-prev,
  .slider-next {
    width: 32px;
    height: 32px;
  }

  .features-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .feature-card {
    padding: 0.5rem 12px 0.3rem 12px;

    border-radius: 14px;
  }

  .feature-icon {
    width: 42px;
    height: 42px;
  }

  .icon-item {
    width: 24px;
    height: 24px;
  }

  .feature-title {
    font-size: 0.85rem;
  }

  .feature-desc {
    font-size: 0.7rem;
  }

  .courses-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .course-card {
    margin-bottom: 0;
  }

  .course-image {
    height: 110px;
  }

  .course-content {
    padding: 12px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .header-content {
    padding: 0 15px;
    box-sizing: border-box;
  }

  .logo-icon {
    width: 45px;
    height: 45px;
    font-size: 1.6rem;
  }

  .logo-text h1 {
    font-size: 1.3rem;
  }

  .slider-container {
    height: 160px;
  }

  .slide {
    padding: 0 15px;
  }

  .slide-title {
    font-size: 1.1rem;
  }

  .slide-desc {
    font-size: 0.75rem;
  }

  .slide-badge {
    font-size: 0.65rem;
    padding: 3px 10px;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .feature-card {
    padding: 0.5rem 12px 0.3rem 12px;
  }

  .feature-icon {
    width: 36px;
    height: 36px;
  }

  .icon-item {
    width: 22px;
    height: 22px;
  }

  .feature-title {
    font-size: 0.8rem;
  }

  .feature-desc {
    font-size: 0.65rem;
  }

  .title-icon {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }

  .title-content h2 {
    font-size: 0.8rem;
  }

  .title-content p {
    font-size: 0.75rem;
    line-height: 10px;
  }

  .courses-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .course-image {
    height: 100px;
  }

  .course-title {
    font-size: 0.9rem;
  }

  .course-description {
    font-size: 0.75rem;
  }

  .enroll-btn {
    padding: 5px 12px;
    font-size: 0.8rem;
    min-width: 55px;
  }
}

@media (max-width: 360px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-card {
    padding: 0.5rem 12px 0.3rem 12px;
  }

  .feature-icon {
    width: 32px;
    height: 32px;
  }

  .icon-item {
    width: 20px;
    height: 20px;
  }

  .feature-title {
    font-size: 0.75rem;
  }

  .feature-desc {
    font-size: 0.6rem;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-card,
.course-card {
  animation: fadeInUp 0.5s ease forwards;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style>
